import React, { Component } from 'react';
import { Map } from '@tarojs/components';
import { connect } from 'react-redux'
import './AxMap.scss'
import Taro from '@tarojs/taro'

import battery from '../../images/battery2.png'

@connect(({ location, cabinets }) => ({
  location, cabinets
}), (dispatch) => ({

}))
class AxMap extends Component {

  markTap (value) {
    this.props.onMarkTap(value)
  }

  get newCabinets () {
    const { cabinets } = this.props.cabinets
    if (cabinets != null && cabinets.length > 0) {
      let marksList: any = []
      this.props.cabinets.cabinets.forEach(item => {
        marksList.push({
          id: parseInt(item.id),
          latitude: item.place.coordinate.latitude,
          longitude: item.place.coordinate.longitude,
          iconPath: battery,
          width: '34.8',
          height: '40'
        })
      })
      return marksList
    }
    return ''
  }

  render () {
    
    return (
      <Map
        id={this.props.mapId}
        className='ax-map-container'
        longitude={this.props.location.wxLocation.longitude}
        latitude={this.props.location.wxLocation.latitude}
        markers={this.newCabinets}
        onClick={this.onTap}
        onMarkerTap={this.markTap.bind(this)}
        subkey='BYSBZ-7ZIRU-3URVW-2YNM7-2KWS7-3EFIS'
        setting={{showLocation: true}}
        layerStyle={1}
      >
        {this.props.children}
      </Map>
    )
  }
}

export default AxMap